.header__wrapper {
    font-family: Arial, sans-serif; 
    font-size: 10px; /* Tamaño de fuente más pequeño */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    padding: 0.5rem 0; /* Espacio interno */
    margin: 0; /* Elimina el margen externo */
    background: rgba(0,0,0,1.0);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.25);
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    display: flex; /* Utilizamos flexbox */
    justify-content: space-between; /* Distribuye los elementos horizontalmente */
    align-items: center; /* Centra verticalmente los elementos */
    height: 50px;
}
body {
    margin: 0;
    /* Elimina el margen del body */
}

nav.menu1 a {
    font-size: 14px;
    font-weight: bold; /* Texto en negrita */
    color: white; /* Color de texto normal */
    text-decoration: none; /* Quitar subrayado de enlaces */
    margin-right: 20px; /* Espacio entre enlaces */
}

nav.menu1 a:hover,
nav.menu1 a:focus {
    color: red; /* Cambiar color al pasar el mouse o enfocar */
}

.menu2{
   margin-left: 70px;
}
.menu2 a {
   
    font-size: 12px !important; /* Tamaño de fuente más pequeño */
}

.logo {
    margin-left: 7%;
    color: white; /* Color de texto */
    font-size: 16px; /* Tamaño de fuente */
    max-width: 170px; /* Tamaño máximo del logotipo */
    height: auto;
}

.menu2 a, .search, .acceso-clientes {

    color: white; /* Color de texto */
    text-decoration: none; /* Quitar subrayado de enlaces */
    font-size: 16px; /* Tamaño de fuente */
    margin: 0 10px; /* Espacio alrededor de los elementos */
}

.menu2 a:hover, .search:hover, .acceso-clientes:hover {
    text-decoration: underline; /* Subrayar enlaces al pasar el ratón */
}
.search {
    margin-right: 50px; /* Mueve la lupa hacia la izquierda */
}
.acceso-clientes {
    font-size: 12px;
    background-color: #4C71FC; /* Color de fondo */
    border: none; /* Sin borde */
    border-radius: 20px; /* Bordes redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    margin-right: 110px;
    margin-left: -70px;
}
.background-container {
    background-image: url('../IMAGENES/fondo.webp'); /* Reemplaza 'ruta/a/la/imagen.jpg' con la URL de tu imagen */
    background-size: cover; /* Ajusta la imagen para que cubra todo el contenedor */
    background-position: center; /* Centra la imagen horizontal y verticalmente */
    height: 500px; 
 /* Altura de la sección de la imagen de fondo */
}

/* Estilo para los botones */
/* Estilo para el contenedor del contenido */
.content-container {
    position: absolute; /* Establece el posicionamiento absoluto */
    top: 43%; /* Coloca el contenido en el centro vertical */
    left: 50%; /* Coloca el contenido en el centro horizontal */
    transform: translate(-50%, -50%); /* Centra el contenido */
    text-align: left; /* Alinea el texto al centro */
    color: white; /* Color del texto blanco */
    font-family: Arial, sans-serif; /* Tipo de letra */
    margin-left: -285px;
}
.benefits {
  font-family:Arial, Helvetica, sans-serif sans-serif;
 line-height: 1.5;
}

/* Estilo para los botones */
/* Estilo para los botones */
.blue-button {
    background-color: #4C71FC; /* Color de fondo azul */
    color: white; /* Color del texto blanco */
    border: none; /* Sin borde */
    padding: 15px 25px; /* Aumenta el espacio interno */
    border-radius: 25px; /* Bordes redondeados */
    margin: 3px; /* Espacio entre los botones */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
    font-weight: bold; /* Texto en negrita */
    font-family: Arial, sans-serif; /* Tipo de letra */
    font-size: 16px; /* Tamaño de la fuente */
    width: 200px;
    margin-top: 4%;
    
}
.blue-button:hover{
    background-color: #3701fc;
}

.diners-club {
    font-size: 36px; /* Tamaño de fuente más grande */
    font-weight: bold; /* Texto en negrita */
}

.symbol {
    font-size: 40%;
    vertical-align: middle;
    position: relative;
    top: -5px;  /* Disminuye el tamaño del símbolo */
}
strong {
    margin-top: -3%;
    font-size: 24px; /* Aumenta el tamaño de la letra al 120% del tamaño original */
    font-family: 'Muller', Arial, sans-serif; /* Agrega la fuente personalizada 'Muller' */
}
.menu {
    display: none;
    position: absolute;
text-decoration: none;
background-color: rgba(43, 41, 41, 0.9);
   height: 140px;
    padding: 0;
    width: 200px;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: -2%;
    text-decoration: none;
  }
  .menu a:hover {
    padding-left: 10px; 
    background-color: #000; 
    margin: 0; /* Quitamos el margen */
   /* Cambia el color de fondo a negro al pasar el mouse sobre cada opción del menú */
  }
  .menu a {
    margin-left: 5%;
    margin-top: 1%;
    display: block;
    padding: 5px;
    color: #4C71FC;
    text-decoration: none;
    padding: 15px 0;
    border-bottom: 0.2px solid #4b4a4a;
  }
  .menu a:last-child {
    border-bottom: none; /* Quitamos el borde inferior del último elemento */
  }
  .acceso-clientes:hover {
    background-color: #3701fc;
    color: white; /* Azul más oscuro al pasar el mouse sobre el botón de acceso a clientes */
    text-decoration: none; /* Quita el subrayado al pasar el mouse sobre el botón de acceso a clientes */
  }
  .acceso-clientes:hover .menu,
  .acceso-clientes.clicked .menu {
    display: block;
    color: #00468b; /* Azul más oscuro al pasar el mouse sobre el botón de acceso a clientes */
    text-decoration: none; /* Quita el subrayado al pasar el mouse sobre el botón de acceso a clientes */
  }